<script setup>
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const router = useRouter()
	const route = useRoute()
	const dialogVisible = ref(false)

	const tableData = ref([{
		name: 'xabntih.cn',
		leading_price: 1000,
		price: 470,
		agency_price: 470,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 0
	}, {
		name: 'nazhuai.cn',
		leading_price: 750,
		price: 750,
		agency_price: 1000,
		discount: 100,
		delete_type: 'Delete',
		remaining_time: '12小时5分',
		status: 1
	}, {
		name: 'fjcrnjh.cn',
		leading_price: 900,
		price: 900,
		agency_price: 1000,
		discount: 100,
		delete_type: '190-Pre',
		remaining_time: '30小时17分',
		status: 2
	}, {
		name: 'fuzhuangren.com.cn',
		leading_price: 800,
		price: 800,
		agency_price: 1000,
		discount: 80,
		delete_type: 'GD-Pre',
		remaining_time: '6小时',
		status: 3
	}, {
		name: 'mashuang.com',
		leading_price: 800,
		price: 800,
		agency_price: 1000,
		discount: 80,
		delete_type: 'GD-Pre',
		remaining_time: '6小时',
		status: 0
	}, {
		name: 'nazhuai.com.cn',
		leading_price: 750,
		price: 600,
		agency_price: 600,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 1
	}, {
		name: 'fjcrnjh.com.cn',
		leading_price: 750,
		price: 600,
		agency_price: 600,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 2
	}, {
		name: 'fuzhuangren.com',
		leading_price: 750,
		price: 600,
		agency_price: 600,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 3
	}, {
		name: 'mashuang.com.cn',
		leading_price: 750,
		price: 600,
		agency_price: 600,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 0
	}, {
		name: 'xabntih.com.cn',
		leading_price: 750,
		price: 600,
		agency_price: 600,
		discount: 0,
		delete_type: 'Delete',
		remaining_time: '4小时30分',
		status: 1
	}])


	const tableData2 = ref([{
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}, {
		name: 'axzadc.cn',
		price: 50,
		result: '出价成功！'
	}])

	const activeTab = ref(0)

	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}
	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const form = reactive({})

	const multipleSelection = ref([])

	const currentPage = ref(1)
	const total = 1000

	const operateClick = () => {
		if (form.operate == 0) {
			ElMessage({
				type: 'success',
				message: `操作成功`,
			})
		} else {
			ElMessageBox({
				title: '',
				customClass: 'custom-message',
				message: h('div', null, [
					h('h4', null, '您已选中3条域名进行批量出价'),
					h('span', {
						style: 'color: #F04134'
					}, '出价后不可撤回'),
					h('span', {
						style: 'color: #999999'
					}, '，确定出价吗？'),
				]),
				showCancelButton: true,
				confirmButtonText: '出 价',
				cancelButtonText: '取 消',
				type: 'warning'
			}).then((action) => {
                dialogVisible.value = true
			})
		}
	}
	
	
	const handlePrice  = (row) => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', {style: 'font-weight: 500'}, `此域名${row.name}领先价格为${row.leading_price}元，您本次出价${row.agency_price}元，`),
				h('span', {
					style: 'color: #F04134'
				}, '出价后不可撤回'),
				h('span', {
					style: 'color: #999999'
				}, '，确定出价吗？'),
			]),
			showCancelButton: true,
			confirmButtonText: '出 价',
			cancelButtonText: '取 消',
			type: 'warning'
		}).then((action) => {
		   ElMessage({
		   	type: 'success',
		   	message: `操作成功`,
		   })
		})
	}

	const reset = () => {
		form.delete_type = ''
		form.status = ''
		form.nameStr = ''
		form.num = ''
	}

	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const domainClick = () => {
		router.push('/my-domains-details')
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			我的竞价
		</div>
		<div class="top-area flex-between">
			<div class="area-item" @click="switchTab(0)">
				<div class="area-item-left">
					<i class="iconfont icon-paimai"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">竞价中</div>
					<div class="area-item-val">3</div>
				</div>
			</div>
			<div class="area-item" @click="switchTab(1)">
				<div class="area-item-left">
					<i class="iconfont icon-sifapaimai"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">已结束</div>
					<div class="area-item-val">17</div>
				</div>
			</div>
			<div class="area-item" @click="switchTab(2)">
				<div class="area-item-left">
					<i class="iconfont icon-dingdanwancheng_icon"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">我的得标</div>
					<div class="area-item-val">36</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-yuding"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">待交割</div>
					<div class="area-item-val">209</div>
				</div>
			</div>
		</div>
		<div class="table-box">
			<div class="table-tool">
				<div class="tool-left">
					<el-button @click="reset">重置条件</el-button>
					<el-button type="warning">去竞价</el-button>
					<el-date-picker v-model="form.date" type="daterange" range-separator="至"
						style="margin-left: 10px;width: 250px;" start-placeholder="开始日期" end-placeholder="结束日期" />
				</div>
				<div class="tool-right">
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="../../assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="form.nameStr"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div class="table-tab" v-if="activeTab == 0">
				<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="name" label="域名" width="200">
						<template #default="scope">
							<el-link><span class="warn">{{scope.row.name}}</span></el-link>
						</template>
					</el-table-column>
					<el-table-column prop="leading_price" label="领先价格" sortable width="120">
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.leading_price}} </span>
						</template>
					</el-table-column>
					<el-table-column prop="agency_price" align="center" sortable width="200">
						<template #header>
							您的出价（代理价） <el-tooltip class="box-item" effect="dark" content="竞价落会后自动为您释放保证金"
								placement="top">
								<el-icon>
									<WarningFilled />
								</el-icon>
							</el-tooltip>
						</template>
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.price}} ({{scope.row.agency_price}})</span>
						</template>
					</el-table-column>
					<el-table-column prop="discount" label="预计折扣" width="120" align="center">
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.discount}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="delete_type" align="center">
						<template #header>
							<el-select v-model="form.delete_type" placeholder="删除类型" style="width: 120px" clearable>
								<el-option label="Delete" value="Delete"></el-option>
								<el-option label="190-Pre" value="190-Pre"></el-option>
								<el-option label="Ename-Pre" value="Ename-Pre"></el-option>
								<el-option label="GD-Pre" value="GD-Pre"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="remaining_time" label="剩余时间" sortable align="center"></el-table-column>
					<el-table-column prop="status" width="150">
						<template #header>
							<el-select v-model="form.status" placeholder="状态" style="width: 120px " clearable>
								<el-option label="领先" :value="0"></el-option>
								<el-option label="落后" :value="1"></el-option>
								<el-option label="交易关闭" :value="2"></el-option>
								<el-option label="被赎回" :value="3"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="td-success">领先</span>
							<span v-if="scope.row.status == 1" class="td-error">落后</span>
							<span v-if="scope.row.status == 2" class="td-warn">交易关闭</span>
							<span v-if="scope.row.status == 3" class="td-purple">被赎回</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="180">
						<template #default="scope">
							<div class="operate-flex">
								<el-input-number v-model="scope.row.num" :min="1" :controls="false"
									style="width: 60px;" />
								<el-button @click="handlePrice(scope.row)">出 价</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="table-tab" v-if="activeTab == 1">
				<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="name" label="域名" width="200">
						<template #default="scope">
							<el-link><span class="warn">{{scope.row.name}}</span></el-link>
						</template>
					</el-table-column>
					<el-table-column prop="leading_price" label="结拍价格" sortable width="120">
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.leading_price}} </span>
						</template>
					</el-table-column>
					<el-table-column prop="agency_price" label="您的出价（代理价）" align="center" sortable width="200">
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.price}} ({{scope.row.agency_price}})</span>
						</template>
					</el-table-column>
					<el-table-column prop="discount" label="预计返现" width="120" align="center">
						<template #default="scope">
							<span :class="[scope.row.price >= scope.row.agency_price ? 'error' : 'success' ]">¥
								{{scope.row.discount}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="delete_type" align="center">
						<template #header>
							<el-select v-model="form.delete_type" placeholder="删除类型" style="width: 120px" clearable>
								<el-option label="Delete" value="Delete"></el-option>
								<el-option label="190-Pre" value="190-Pre"></el-option>
								<el-option label="Ename-Pre" value="Ename-Pre"></el-option>
								<el-option label="GD-Pre" value="GD-Pre"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="remaining_time" label="结束时间" sortable align="center"></el-table-column>
					<el-table-column prop="status" width="150">
						<template #header>
							<el-select v-model="form.status" placeholder="状态" style="width: 120px " clearable>
								<el-option label="得标" :value="0"></el-option>
								<el-option label="失标" :value="1"></el-option>
								<el-option label="交易关闭" :value="2"></el-option>
								<el-option label="被赎回" :value="3"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="td-success">得标</span>
							<span v-if="scope.row.status == 1" class="td-error">失标</span>
							<span v-if="scope.row.status == 2" class="td-warn">交易关闭</span>
							<span v-if="scope.row.status == 3" class="td-purple">被赎回</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="180">
						<template #default="scope">
							<span>-</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="table-tab" v-if="activeTab == 2">
				<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="name" label="域名" width="200">
						<template #default="scope">
							<el-link link><span class="warn">{{scope.row.name}}</span></el-link>
						</template>
					</el-table-column>
					<el-table-column prop="leading_price" label="结拍价格" sortable width="120">
						<template #default="scope">
							<span>¥ {{scope.row.leading_price}} </span>
						</template>
					</el-table-column>
					<el-table-column prop="agency_price" label="实付价格（保证金）" align="center" sortable width="200">
						<template #default="scope">
							<span>¥ {{scope.row.price}} ({{scope.row.agency_price}})</span>
						</template>
					</el-table-column>
					<el-table-column prop="discount" label="预计返现" width="120" align="center">
						<template #default="scope">
							<span class="success">¥ {{scope.row.discount}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="delete_type" align="center">
						<template #header>
							<el-select v-model="form.delete_type" placeholder="删除类型" style="width: 120px" clearable>
								<el-option label="Delete" value="Delete"></el-option>
								<el-option label="190-Pre" value="190-Pre"></el-option>
								<el-option label="Ename-Pre" value="Ename-Pre"></el-option>
								<el-option label="GD-Pre" value="GD-Pre"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="remaining_time" label="结束时间" sortable align="center"></el-table-column>
					<el-table-column prop="status" width="150">
						<template #header>
							<el-select v-model="form.status" placeholder="状态" style="width: 120px " clearable>
								<el-option label="待支付" :value="0"></el-option>
								<el-option label="交割中" :value="1"></el-option>
								<el-option label="已交割" :value="2"></el-option>
								<el-option label="被赎回" :value="3"></el-option>
								<el-option label="交易关闭" :value="4"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<span v-if="scope.row.status == 0" class="td-error">待支付</span>
							<span v-if="scope.row.status == 1" class="td-success">交割中</span>
							<span v-if="scope.row.status == 2" class="td-success">已交割</span>
							<span v-if="scope.row.status == 3" class="td-gray">被赎回</span>
							<span v-if="scope.row.status == 4" class="td-gray">交易关闭</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="180">
						<template #default="scope">
							<div class="operate-btns">
								<el-button link v-if="scope.row.status == 0">支付</el-button>
								<el-button link v-else-if="scope.row.status == 2">管理</el-button>
								<span v-else>-</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="table-tool table-tool-bottom">
				<div class="tool-left">
					<span class="selected">
						搜索结果共{{total}}条，已选择{{multipleSelection.length}}条 ，
					</span>
					<el-select v-model="form.operate" placeholder="选择操作" clearable
						style="width: 100px;margin-right:15px;">
						<el-option label="批量出价" :value="0" v-if="activeTab == 0"></el-option>
						<el-option label="导出选中" :value="1"></el-option>
						<el-option label="导出全部" :value="2"></el-option>
					</el-select>
					<el-button @click="operateClick">批量操作</el-button>
				</div>
				<div class="tool-right" v-if="activeTab == 0">
					<span>统一出价</span>
					<el-input-number v-model="form.num" :min="1" :controls="false" style="width: 60px;" />
				</div>
			</div>
			<div class="pager-box">
				<div class="pager-total"></div>
				<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
					:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
			<el-dialog v-model="dialogVisible" title="批量出价结果" width="520">
				<el-table :data="tableData2" style="width: 100%" show-overflow-tooltip height="285">
					<el-table-column prop="name" label="域名">
					</el-table-column>
					<el-table-column prop="price" label="您的出价">
						<template #default="scope">
							￥ {{scope.row.price}}
						</template>
					</el-table-column>
					<el-table-column prop="result" label="结果">
					</el-table-column>
				</el-table>
				<div class="refresh-box">
					<el-checkbox label="重新选中出价失败的域名" />
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="warning" @click="dialogVisible = false">
							确 认
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<style scoped lang='scss'>
	.table-box {
		background: #FFFFFF;
		box-shadow: 0px 0px 14px 0px #00000017;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
	}


	.status-btn {
		margin-left: 15px;
	}

	.status-btn:hover {
		text-decoration: underline;
	}


	.operate-flex {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1px 0;
	}

	.operate-flex .el-button {
		margin-left: 10px;
		background-color: #F68A0C;
		border-color: #F68A0C;
		color: #fff;
	}

	.operate-flex .el-button:hover {
		background-color: #F27202;
		border-color: #F27202;
	}

	.table-tool-bottom {
		padding: 12px 0;
		border-bottom: 1px solid #ebeef5;
	}

	.table-tool-bottom .tool-right {
		padding-right: 98px;
	}

	.table-tool-bottom .tool-right span {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .el-input-number .el-input__wrapper {
		background-color: transparent;
	}
</style>